.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

#channel-statistic-pie-chart {
    width: 100%;
    height: 320px;
}

#customer-statistic-pie-chart {
    width: 100%;
    height: 320px;
}

#area-statistic-map-chart {
    width: 100%;
    height: 460px;
}

#payment-statistic-pie-chart {
    width: 100%;
    height: 320px;
}

#status-statistic-pie-chart {
    width: 100%;
    height: 320px;
}

#goods-statistic-pie-chart {
    width: 100%;
    height: 320px;
}

.trade-amount-container {
    text-align: center;
}

.trade-amount-price {
    font-size: 6em;
    color: #e3da48;
}

.trade-amount-label {
    font-size: 1.2em;
    margin-left: 16px;
    color: #e3da48;
}

.trade-amount-title {
    font-size: 3em;
    margin-right: 16px;
    color: #e3da48;
}

.payment-amount-container {
    text-align: center;
}

.payment-amount-label {
    font-size: 1.2em;
    color: #fbdb81;
}

.dashboard-title {
    font-size: 2.2em;
    text-align: center;
}

.panel-grey-blue {
    border-color: transparent!important;
    background-color: #162031!important;
}

.panel-grey-blue>.panel-heading {
    background-color: #121b29!important;
    color: #9d9d9d!important;
}

.panel-title {
    text-align: center;
}

.no-padding {
    padding: 0!important;
}

.navbar-grey-blue {
    background-image: linear-gradient(to bottom,#162031 0,#162031 100%)!important;
}

.navbar-grey-blue>.active.a {
    background-image: linear-gradient(to bottom,#0a111c 0,#0a111c 100%)!important;
}

.msg-container {
    text-align: center;
}

.merchant-profile {
    text-align: center;
    margin-top: 80px;
}

.merchant-profile-avatar {
    width: 144px;
    height: auto;
}

.merchant-profile-title {
    font-size: 1.5em;
    color: white;
    margin-top: 26px;
}

.merchant-logout-container {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
}

.merchant-logout-container>button {
    width: 200px;
    margin: auto;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
